<template>
	<div id="tabbar-box">
		<div class="tabitem" @click="onClicked(key)" v-for="(item,key) in tabItems">
			<img :src="item.icon" v-if="$route.path!=item.path" alt="">
			<img :src="item.selectIcon" v-else alt="">
			<div v-bind:class="{redcolor:$route.path==item.path}">{{item.text}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'TabBar',
		props: {
			tabItems: []
		},
		data: function () {
			return {
				curIndex: 0,
			}
		},
		methods:{
			onClicked(index){
        if(this.$route.path!=this.tabItems[index]){
					this.$router.replace(this.tabItems[index].path)
				}
				this.curIndex=index;
				this.$emit("clickPosition",index)
			}
		},
    created() {
    }
  }
</script>

<style scoped>
	#tabbar-box {
		width: 100%;
    z-index: 100;
		background-color: white;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 1rem 1rem;
    border-top: 1px solid lightgrey;
	}
	.redcolor{
		color: var(--color-tint);
	}
	.tabitem{
		display: flex;
    height: 3.5rem;
    flex-grow: 1;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	img{
		width: 1.4rem;
		height: 1.4rem;
	}
	div{
		font-size: 1.4rem;
	}
</style>
